<template>
	<h3>1. 阻止默认事件行为</h3>
	<a href="http://www.baidu.com">跳转百度网</a>
	<br />
	<a href="http://www.baidu.com" @click.prevent>跳转百度网</a>
	<h3>2. 阻止事件冒泡</h3>
	<div class="div1" @click="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click.stop="showmsg('我是父元素')">我是父元素
		  <div class="div3" @click.stop="showmsg('我是子元素')">我是子元素
		  
		  </div>
		</div>
	</div>
	<h3>3. 事件捕获</h3>
	<div class="div1" @click="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click.capture="showmsg('我是父元素')">我是父元素
		  <div class="div3" @click="showmsg('我是子元素')">我是子元素  
		  </div>
		</div>
	</div>
	<h3>4. 使事件只触发一次</h3>
	<div class="div3" @click.once="showmsg('使事件只触发一次')">使事件只触发一次</div>
	<h3>5. 使DOM元素只有自身触发事件时才执行事件方法</h3>
	<div class="div1" @click.self="showmsg('我是祖父元素')">
		我是祖父元素
		<div class="div2" @click.self="showmsg('我是父元素')">我是父元素
		  <div class="div3" @click.self="showmsg('我是子元素')">我是子元素  
		  </div>
		</div>
	</div>
</template>

<script setup>
	//通过.prevent事件修饰符可以实现阻止默认事件行为的功能。
	//通过.stop事件修饰符可以实现阻止事件冒泡的功能
	//定义函数（事件处理器）
	let showmsg=msg=>{
		console.log(msg);
	}
	//通过.capture事件修饰符可以实现事件捕获的功能
	//通过.once事件修饰符可以实现使事件只触发一次的功能
	//通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能
</script>

<style>
	.div1{
		 width: 250px;
		 height: 250px;
		 background-color: bisque;
	}
	.div2{
		 width: 150px;
		 height: 150px;
		 background-color: chocolate;
	}
	.div3{
		 width: 50px;
		 height: 50px;
		 background-color: cadetblue;
	}
</style>